<template>
  <div>

      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="searchForm.searchInput" size="large" style="width: 300px" placeholder="输入您想查询的内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="margin-left: 10px">查询</el-button>
        </el-form-item>
      </el-form>

    <el-row :gutter="10">
      <el-col :xs="0" :sm="2" :md="3" :lg="4" :xl="4"><div class="grid-content"></div></el-col>
      <el-col :xs="24" :sm="20" :md="18" :lg="16" :xl="16">
        <div class="trans">
          <div v-for="post in posts">
            <div style="padding: 14px;">
              <span>{{post["title"]}}</span>
              <div class="bottom clearfix">
                <span class="introduction">{{ post["introduction"] }}</span>
                <br>
                <span>
                    <p class="heat">
                      热度: {{ post["heat"] }}
                    </p>
                    <p class="postType">
                      类型：{{post["type"]}}
                    </p>
                  </span>
                <span>
                    <p class="time">
                      {{ post["time"] }}
                    </p>
                    </span>
                <router-link :to="'/post/'+post['id']" class="btn btn-link">查看评论</router-link>
              </div>
            </div>
          </div>
        </div>
        <p v-if="SR" class="trans">没有更多了</p>
      </el-col>
      <el-col :xs="0" :sm="2" :md="3" :lg="4" :xl="4"><div class="grid-content"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'News',
  data () {
    return {
      SR:false,
      searchForm: {
        searchInput:''
      },
      posts: [],
    }
  },
  methods: {
    onSubmit () {
      if(this.searchForm.searchInput===''){
        this.$message.error("输入不能为空");
        return;
      }else{
        this.$http.post("http://localhost:8081/searchPosts", this.searchForm)
            .then(res => res.json(), error => console.log(error))
            .then(res => this.posts = res.message, error => console.log(error));
        this.SR=true;
      }
    }
  }
}
</script>

<style scoped>
.demo-form-inline{
  margin-top: 40px;
  align-content: center;
  align-items: center;
}

.el-card{
  margin-top: 100px;
  height:400px;
  /*max-height:calc(100% - 10px);*/
  /*max-width:calc(100% - 10px);*/
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
